<template>
  <div class="index">
    <div class="footer"></div>
    <p>月平均分布</p>
    <div class="leftCentEchart"></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getMonthData } from "@/api/echarts";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
const router = useRouter();

const monthListRef = ref([]); // 月份列表
const newFansRef = ref([]); // 新增粉丝
const newTouristRef = ref([]); // 新增游客

onMounted(() => {
  getData();
});
/**
 * 请求数据
 */
async function getData() {
  let res = await getMonthData();
  if (res.code == 0) {
    const {
      data: { monthList, newFans, newTourist },
    } = res;
    monthListRef.value = monthList;
    newFansRef.value = newFans;
    newTouristRef.value = newTourist;
    initEcharts();
  } else if (res.msg.includes("登录")) {
    router.replace("/");
  }
}
/**
 * 初始化图表
 */
function initEcharts() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector(".leftCentEchart"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["北方", "南方"],
      top: "16%",
      right: "10%",
      textStyle: {
        color: "#4c9bfd",
        fontSize: 14, //字体大小
      },
    },
    grid: {
      top: "30%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // 保存图片
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      // X轴文字
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255, 255, 255, 0.7)",
        },
      },
      // X轴轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(25, 186, 139, 0.17)",
        },
      },
    },
    yAxis: {
      type: "value",
      // Y轴度量线
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(25, 186, 139, 0.17)",
        },
      },
      axisLine: {
        //Y轴轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: "rgba(25, 186, 139, 0.17)",
          width: 1,
          type: "solid",
        },
      },
      // y轴文字的配置
      axisLabel: {
        textStyle: {
          color: "rgba(255, 255, 255, 0.7)", //Y轴内容文字颜色
        },
      },
    },
    series: [
      {
        name: "新增粉丝",
        data: newFansRef.value,
        type: "line",
        // 折线修饰为圆滑
        smooth: true,
      },
      {
        name: "新增游客",
        data: newTouristRef.value,
        type: "line",
        smooth: true,
      },
    ],
  });
  // 图表跟随浏览器自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .leftCentEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
